<template>
    <div class="window-filter">
        <div class="filter-header ui-v-a">
            <i></i>
            <span>筛选</span>
        </div>

        <div class="filter-list">
            <div class="slider">
                <div @click="clearFilter" class="clearAll">清除所选</div>

                <template v-for="ca of list">
                    <div v-if="ca.strategy">
                        <div class="category-title">
                            {{ca.spec_name}}
                        </div>
                        <span v-for=" (key,val) of ca.strategyList "
                              :class="['category-tag',key ==tmpTouchMainSpec?'select':'']"
                              @click="expandFilter(key)">{{key}}</span>


                        <div v-if=" ca.strategyList[tmpTouchMainSpec]" class="category-strategy">
                            <div class="category-subtitle"></div>
                            <span v-for="(specvalue_id,specvalue_name)  of ca.strategyList[tmpTouchMainSpec]"
                                  :class="['category-tag',touched_specs&&touched_specs[ca.spec_id]==specvalue_id?'select':'']"
                                  @click="setFilter(ca.spec_id,specvalue_id)">{{specvalue_name}}</span>

                        </div>
                    </div>
                    <div v-else>
                        <div class="category-title">
                            {{ca.spec_name}}
                        </div>
                        <span v-for="val of ca.specvalue"
                              :class="['category-tag',touched_specs&&touched_specs[ca.spec_id]==val._id?'select':'']"
                              @click="setFilter(ca.spec_id,val._id)">{{val.name}}</span>
                    </div>
                </template>

                <div class="filter-holder"></div>
            </div>
        </div>
    </div>

    <footer>
        <button class="ui-btn-yellow ui-v-a" @click="Searching"><span>确定</span></button>
    </footer>

</template>

<script>
    import http from '../libs/http'
    import Vue from 'vue'

    export default{
        props: ['selected_cate_id', 'selected_brand_id', 'selected_specs'], //selected_specs是一个map{specvalue_id:spec_id}
        data(){
            return {
                map: {},
                list: [],
                needRefresh: true,
                touched_specs: {},
                tmpTouchMainSpec: '' //点击一级分类
            }
        },
        watch: {
            //selected_cate_id后需要刷新数据
            selected_cate_id: function (nVal, oVal) {
                this.needRefresh = true;
            },
            //selected_brand_id后需要刷新数据
            selected_brand_id: function (nVal, oVal) {
                this.needRefresh = true;
            },
            selected_specs: function (nVal, oVal) {
                console.log(nVal);
                console.log(oVal);
            }
        },

        attached: function () {
            var self = this;
            self.touched_specs = self.selected_specs;

            if (this.needRefresh) {
                this.needRefresh = false;

                var conditions = {};

                if (self.selected_cate_id)
                    conditions.category_id = self.selected_cate_id;

                if (self.selected_brand_id)
                    conditions.brand_id = self.selected_brand_id;

                http.get({
                            url: api + 'commodity/list/specs',
                            jsonp: true,
                            data: conditions
                        })
                        .then(function (obj) {
                            if (obj.code == 0) {

                                var data = obj.data || [];

                                self.list = data.relative.map(function (v) {
                                    return data.specs.reduce(function (last, now) {
                                        if (now.spec_id == v.key) {
                                            now.select = '';
                                            return now;
                                        } else {
                                            return last;
                                        }
                                    });
                                });


                                data.strategylist && data.strategylist.forEach(function (v) {
                                    self.list.forEach(function (specs) {
                                        if (specs.spec_id == v.spec_id) {
                                            specs.strategy = true;
                                            specs.depart = '';
                                            specs.select = '';
                                            specs.strategyList = v.list;
                                        }
                                    }, null);
                                });

                            } else {
                                //   alert(obj.msg);
                            }
                        })
            }
        },
        methods: {
            setFilter: function (spec_id, specvalue_id) {
                if (!this.touched_specs)
                    this.touched_specs = {};

                if (this.touched_specs[spec_id] && this.touched_specs[spec_id] == specvalue_id)
                    Vue.delete(this.touched_specs, spec_id);
                else
                    Vue.set(this.touched_specs, spec_id, specvalue_id);
            },
            expandFilter: function (tmpTouchMainSpecName) {
                this.tmpTouchMainSpec = tmpTouchMainSpecName;
            },
            Searching: function () {
                this.selected_specs = this.touched_specs;
                this.$dispatch('change-spec', this.selected_specs);
            },
            clearFilter: function () {
                this.touched_specs = {};
                this.tmpTouchMainSpec = '';
            }
        }
    }
</script>

<style scoped>
    .window-filter {
        background: #f0f0f0;
        position: fixed;
        width: 90%;
        height: 100%;
        z-index: 25;
        overflow-y: scroll;
        right: 0;
        bottom: 0;
        transition: right 0.3s;
        -webkit-transition: right 0.3s;
    }

    .filter-header {
        height: 36px;
        font-size: 14px;
        width: 100%;
        background: white;
        border-bottom: solid 1px #f0f0f0;
        text-align: center;
    }

    .filter-header i {
        display: inline-block;
        text-align: center;
        width: 20px;
        height: 100%;
        background: url(../../static/img/ic_filter.png) no-repeat center;
        background-size: 14px;
        vertical-align: middle;
    }

    .filter-list {
        padding: 16px;
        /*height: 100%;*/
    }

    .clearAll {
        float: right;
        font-size: 12px;
    }

    .filter-holder {
        height: 60px;
    }

    .category-title {
        font-size: 12px;
        color: #888888;
        border-bottom: solid 1px #dddddd;
        width: 120px;
        margin-bottom: 8px;
        margin-top: 16px;
    }

    .category-subtitle::before {
        content: '';
        display: block;
        position: absolute;
        width: 8px;
        height: 8px;
        background: url(../../static/img/ic_arrow_111up.png) #f0f0f0 no-repeat center;
        background-size: contain;
        opacity: 1;
        margin-top: -5px;
        margin-left: 8px;
    }

    .category-subtitle {
        font-size: 12px;
        color: #888888;
        border-bottom: solid 1px #aaaaaa;
        margin-right: 200px;
        margin-bottom: 4px;
    }

    .category-tag {
        padding: 8px;
        font-size: 12px;
        text-align: center;
        min-width: 16px;
        height: 16px;
        background: #dddddd;
        display: inline-block;
        margin-right: 8px;
        margin-bottom: 8px;
        /*transition: all 0.3s;*/
        /*-webkit-transition: all 0.3s;*/
    }

    .category-tag.un {
        color: #aaaaaa;
        background: #E8E8E8;
    }

    .category-tag.select {
        background: #111111;
        color: white;
    }

    footer .ui-btn-yellow {
        float: right;
        padding: 0;
        height: 34px;
        margin: 5px;
    }

    .ui-btn-yellow.un {
        background: #dddddd;
        color: #888888;
    }
</style>